<template>
  <div>
    <!-- :model标签开启双向数据绑定,:rules标签开启表单验证，ref指定表单名-->
    <el-form :model="roleForm" label-width="80px" :ref="roleForm" :rules="roleFormRules">

      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="roleForm.roleName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="角色值" prop="roleCode">
        <el-input v-model="roleForm.roleCode" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="roleForm.description" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker type="datetime" placeholder="创建时间" v-model="roleForm.createTime">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="go_back">返回</el-button>
      <el-button type="primary" @click="editSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
    /*编写页面静态部分，即model及vm部分。*/
    //导入cmsApi中的所有接口
    import * as userApi from '../api/user'

    //导出默认的VM
    export default {
        //View层数据的加载
        data() {
            return {
                roleId: '',
                //新增模板界面表单数据
                roleForm: {
                    roleName: '',
                    roleCode: '',
                    description: '',
                    createTime: new Date(),
                }
            }
        },
        //View层调用方法的实现
        methods: {
            //提交按钮调用的方法
            editSubmit: function () {
                //打开提示信息弹出框
                this.$confirm('确认提交吗?', '提示', {}).then(() => {
                    //调用page_add接口，实现新增页面
                    userApi.role_edit(this.roleId, this.roleForm).then((res) => {
                        console.log(res);
                        if (res.success) {
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                           this.go_back();
                        }
                        //提交失败，打印服务端传送的异常信息
                        else if (res.message) {
                            this.$message.error(res.message);
                        } else {
                            this.$message.error('提交失败');
                        }
                    });
                });
            },
            //返回按钮调用的方法
            go_back: function () {
                //设置访问路由
                this.$router.push({
                    //设置url
                    path: '/system/role/list',
                    //设置url中携带的参数
                    query: {
                        page: this.$route.query.page       //从当前url中获取数据
                    }
                });
            }
        },
        created() {
            //获取角色id
            this.roleId = this.$route.params.roleId;
            //获取角色信息
            userApi.role_get(this.roleId).then((res) => {
                if (res) {
                    this.roleForm = res;
                }
            })
        },
        //使用钩子方法，实现在页面加载完成后便调用query()方法
        mounted() {

        }
    }
</script>

<style>
  /*编写页面样式，不是必须*/
</style>
